<template>
  <div class="widget-item">
    <svg-icon v-if="widget.isVip" iconClass="vip" class="vip-icon"></svg-icon>
    <svg-icon v-show="widget.hasAdd" iconClass="widget-check" class="check-icon"></svg-icon>
    <img class="widget-img" :src="widget.imgUrl" alt="">
    <div class="widget-model">
      <div class="widget-model-wrapper">
        <span v-if="!widget.hasAdd" class="widget-btn" @click="onAdd" >
          <svg-icon iconClass="new" class="new-icon"></svg-icon>
          添加到桌面
        </span>
        <span v-else class="widget-btn" @click="onRemove" >
          <svg-icon iconClass="widget-remove"></svg-icon>
          从桌面移除
        </span>
      </div>
    </div>
  </div>
</template>
<script>
// import { checkVip } from '@/utils/user'
import { mapGetters } from 'vuex'
export default {
  name: 'WidgetItem',
  props: {
    widgetNum: Number,
    widget: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    async onAdd () {
      if (!window.navigator.onLine) {
        this.$psMessage('网络异常，添加失败！')
        return
      }
      if (this.loading) return
      // if (this.widget.actionCode) this.$xzAsy('action_report', this.widget.actionCode)
      // !checkVip({
      //   loginMsg: '登录后即可将组件添加到桌面',
      //   rightId: '20004',
      //   title: '解锁桌面小组件',
      //   message: '非会员仅支持添加一个组件，升级会员可添加无限组件！',
      //   loginCode: 8108,
      //   vipCode: 8109,
      //   buyCode: 8109,
      //   showCode: 7373
      // })
      if (this.widgetNum > 0 && !this.userInfo.is_member) {
        this.$PsMessageBox({
          title: '解锁桌面小组件',
          message: `非会员仅支持添加一个组件，升级会员可添加无限组件！`,
          confirmButtonText: '升级会员',
          cancelButtonText: '知道了',
          width: 312,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$gotoMember()
            }
            done()
          }
        })
        return
      }
      if (this.widgetNum > 1) {
        // this.$xzAsy('action_report', 23057)
      }
      this.loading = true
      this.$xz('HtmlClickReport', { ReportID: 7610 })
      this.$xzAsy('xz_add_widget', this.widget.name).then(res => {
        if (res) {
          this.widget.hasAdd = true
          this.$emit('update:widgetNum', this.widgetNum + 1)
          this.$psMessage('已成功添加至桌面！')
        } else {
          this.$psMessage('添加失败，请重试！')
        }
      }).finally((e) => {
        this.loading = false
      })
    },
    onRemove () {
      if (this.loading) return
      this.loading = true
      this.$xzAsy('xz_del_widget', this.widget.name).then(res => {
        if (res) {
          this.widget.hasAdd = false
          this.$emit('update:widgetNum', this.widgetNum - 1)
          this.$psMessage('该组件已移除成功！')
          // this.$xz('HtmlClickReport', { ReportID: 7611 })
        } else {
          this.$psMessage('移除失败，请重试！')
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
  // export function byMemberMessage (ops) {
  //   const defaultWidth = ops.defaultWidth || store.state.app.homeSize.w - 10
  //   ops.showCode && invokeAsyncAPi('action_report', ops.showCode)
  //   return MessageBox({
  //     target: ops.target || document.querySelector('#home-box'),
  //     width: Math.min(defaultWidth, 354) + 'px',
  //     title: ops.title,
  //     message: ops.message,
  //     showCancelButton: false,
  //     showVip: true,
  //     confirmIcon: 'vip',
  //     confirmButtonClass: 'confirm-vip-btn',
  //     confirmButtonText: '升级会员'
  //   }).then(() => {
  //     ops.vipCode && invokeAsyncAPi('action_report', ops.vipCode)
  //     ops.buyCode && invokeAPi('xz_set_stat_id', ops.buyCode)
  //     buyMember()
  //   }).finally(() => {
  //     typeof ops.callback === 'function' && ops.callback()
  //   })
  // }
  // export function checkVip (obj = {}) {
  //   const userId = store.state.user.userInfo.userid
  //   const info = store.state.user.vipInfo[obj.rightId] || {}
  //   const allRightUseObj = getLocalStorage('AllRightUseObj') || {}
  //   const rightUseObj = allRightUseObj[obj.rightId] || {}
  //   const useNum = rightUseObj[userId] || 0
  //   if (obj.loginMsg) {
  //     if (obj.loginLimitNum && useNum < obj.loginLimitNum) {
  //       return true
  //     }
  //     if (!checkLogin(obj)) {
  //       return false
  //     }
  //   }
  //   if (obj.limitNum && useNum < info.RightLimitCond) return true
  //   obj.message = obj.message.replace(/{(.*?)}/g, (match, key) => {
  //     return info[key] ?? ''
  //   })
  //   if (!info.IsRightBeUseful) {
  //     byMemberMessage(obj)
  //     return false
  //   }
  //   return true
  // }
  // export function buyMember () {
  //   invokeAPi('xz_Buy', JSON.stringify({ 'cid': '10003', 'pkgid': '20000' }))
  // }
  // getVipInfo ({ commit, dispatch }, refresh = false) {
  //   const rightIds = ['20001', '20002', '20003', '20004', '20005', '20006', '20007', '20008', '20009', '20011']
  //   return invokeAsyncAPi('xz_GetUserVIPInfo', rightIds, refresh).then(
  //     rights => {
  //       if (!Array.isArray(rights)) return
  //       const rightObj = rights.reduce((obj, it) => {
  //         obj[it.RightID] = it
  //         return obj
  //       }, {})
  //       commit('SET_VIPINFO', rightObj)
  //       dispatch('getUserAdInfo')
  //     }
  //   )
  // },
  // getVipInfoById: (state) => (id) => {
  //   const rightObj = state.user.vipInfo[id] || {}
  //   return rightObj.IsRightBeUseful
  // },
}
</script>
<style lang="scss" scoped>
.widget-item{
  position: relative;
  max-width: 310px;
  border-radius: 8px;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
  &:hover{
    .widget-model{
      display: block;
    }
    .check-icon{
      display: none;
    }
  }
  .widget-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  >.svg-icon{
    position: absolute;
    font-size: 24px;
  }
  .vip-icon{
    top: 8px;
    left: 8px;
  }
  .check-icon{
    top: 5px;
    right: 5px;
  }
  .widget-model{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
  }
  .widget-model-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
  }
  .widget-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 124px;
    height: 34px;
    padding-right: 7px;
    background-color: #000;
    border-radius: 47px;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 14px;
    cursor: pointer;
    &:hover{
      border-color: rgba(255,255,255,0.5);
    }
    .new-icon{
      color: #2fc670;
    }
    .svg-icon{
      margin-right: 8px;
      font-size: 24px;
    }
  }
}
</style>
